<template>
	<view class="pet-card">
		<view class="pet-card__bg">
			<view class="pet-card__bg__left"></view>
			<view class="pet-card__bg__right"></view>
		</view>
		<view class="pet-card__img">
			<uv-image :src="pet.header.url" width="600rpx" height="200rpx" 
				:custom-style="{ filter: pet.use_black_white_header ? 'grayscale(50%)' : 'grayscale(0%)' }"></uv-image>
		</view>
		<view class="pet-card__text">
			<view class="pet-card__text__name">
				<uv-text size="20" bold :text="pet.name"></uv-text>
				<uv-icon v-if="pet.show_death_icon" 
					size="40rpx" name="/static/common/DeathIcon.png"></uv-icon>
			</view>
			<uv-text :text="pet.type"></uv-text>
			<view v-if="pet.show_deathday || pet.birthday" class="uni-mt-2">
				<uv-text :text="pet.show_deathday ? pet.deathday : pet.birthday" mode="date" 
					:prefix-icon="pet.show_deathday ? 'empty-favor' : 'gift'" 
					icon-style="font-size: 32rpx; color: black; margin-right: 5rpx"></uv-text>
			</view>
		</view>
		<view class="pet-card__visibility" v-if="pet.visibility_status === 1">
			<uv-icon name="eye-off" color="#c1849e" size="40rpx"></uv-icon>
		</view>
	</view>
</template>

<script lang="ts" setup>
	defineProps({
		pet: {
			type: Object,
			required: true
		}
	})
	
</script>

<style lang="scss" scoped>
	.pet-card {
		border-radius: 20rpx;
		overflow: hidden;
		min-height: 200rpx;
		max-height: 200rpx;
		min-width: 600rpx;
		max-width: 600rpx;
		position: relative;
		&__bg {
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: row;
			height: 100%;
			z-index: -99;
			&__left {
				width: 100rpx;
				background-color: $uni-color-primary;
			}
			&__right {
				width: 300rpx;
				background: linear-gradient(to right, $uni-color-primary, rgba(0, 0, 0, 0))
			}
		}
		&__img {
			position: absolute;
			left: 100rpx;
			top: 0;
			z-index: -100;
		}
		&__text {
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			left: 30rpx;
			top: 30rpx;
			&__name {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}
		&__visibility {
			position: absolute;
			right: 15rpx;
			top: 15rpx;
		}
	}
	
</style>